<template>
    <div>
    <el-row type="flex"  justify="center"  style="margin: 50px 0px 180px;">
        <el-col :span="14" >
    <el-tabs type="border-card" v-model="elabel">
        
        <el-tab-pane label="成绩" name="chengji" >
            <el-row><i class="el-icon-tickets"></i><span class="etitle">成绩详情</span></el-row>
            <div class="xiangxi"><span >试卷名称：{{paper.name}}</span></div>
            <div class="xiangxi"><span >正确题数：{{rightNum}}/{{selectList.length}}</span></div>
            <div class="xiangxi"><span >正确率：{{rightPercentage}}</span></div>
            <div><el-button type="info" @click="fenxi">试题分析</el-button></div>
        </el-tab-pane>
        
        <el-tab-pane label="试题分析" name="fenxi">
            <!-- <div slot="header" class="clearfix">
                
            </div> -->
            <el-row >
                 <el-button  v-for="(j,index) in selectList.length" :key="index" :type='aCardList[index]' @click="datika(index)">{{j}}</el-button>
            </el-row>
            <el-divider></el-divider>
                <el-row>
                    <span style="font-size: 18px; margin: 15px auto;">{{selectList[index].name}}</span>
                    <!-- <div style="font-size: 18px; margin: 15px auto;">{{selectList[index].name}}</div> -->
                    <el-button style="float: right;" @click="addWrong(selectList[index].id)">加入错题本</el-button>
                </el-row>
             <el-divider></el-divider>

            <!-- <div style="font-size: 15px; margin: 15px auto;"><span>正确答案:{{selectList[index].answer}}</span> <span style="margin: auto 3px;">你的答案:{{isRightList[index].option}}</span></div> -->
   

            <div class="eoption" v-bind:style="styleObjectA[index]"><span style="margin: auto 15px;">A.{{selectList[index].optionA}}</span></div>
            <div class="eoption" v-bind:style="styleObjectB[index]"><span style="margin: auto 15px;">B.{{selectList[index].optionB}}</span></div>
            <div class="eoption" v-bind:style="styleObjectC[index]"><span style="margin: auto 15px;">C.{{selectList[index].optionC}}</span></div>
            <div class="eoption" v-bind:style="styleObjectD[index]"><span style="margin: auto 15px;">D.{{selectList[index].optionD}}</span></div>
        </el-tab-pane>
    </el-tabs>
        </el-col>
    </el-row>

    </div>
</template>

<style>
    .etitle{
        font-size: 12px;
        color: #606266;
        
    }

    .xiangxi{
        margin: 15px auto;
        font-size: 18px;
        color: #30475e;
        font-family: 'PingFang SC';
        
    }

    .eoption{
        margin: 25px auto;
        height: 50px;
        line-height: 50px;
        font-size: 17px;
    }
</style>


<script>
import exam from '@/components/examcompent'
import paperApi from '@/api/paperApi';
import userApi from '@/api/userApi';
export default {

    asyncData({params}){

        return paperApi.subResult(params.answerList,params.pId,params.testId,params.uId).then(response =>{
            console.log(response.data)
            return {
                isRightList:response.data.data.isRightList,
                paper:response.data.data.paper,
                rightNum:response.data.data.rightNum,
                rightPercentage:response.data.data.rightPercentage,
                selectList:response.data.data.selectList,
            }
        })
    },

    data(){
        return{
            user:null,
            pname:"adsadasdas",
            index:0,
            elabel:"chengji", //点击切换
            styleObjectA:[],//样式
            styleObjectB:[],//样式
            styleObjectC:[],//样式
            styleObjectD:[],//样式
            aCardList:[],
            right:{
               borderRadius: '4px',
               border: '1px solid #21243d'
            },
            mistake:{
               borderRadius: '4px',
               border: '1px solid #c81912'
            }
        }
    },

    created(){
        this.eCardList()
        this.getuser()
    },
    methods: {
        getuser(){
          userApi.verify().then(response =>{
            this.user = response.data.data
          })
        },

        addWrong(sid){
            paperApi.addWrongBook(this.user.id,sid)
        },
        
        eCardList(){
            for(var n =0;n < this.selectList.length;n++){
                switch (this.selectList[n].answer){
                        case 1:
                            this.styleObjectA[n] = this.right   
                            break;
                        case 2:
                            this.styleObjectB[n] = this.right   
                            break;
                        case 4:
                            this.styleObjectC[n] = this.right   
                            break;
                        case 8:
                            this.styleObjectD[n] = this.right   
                            break;
                    }
                if(this.isRightList[n].right){
                    this.aCardList[n] = ''
                }else{
                    this.aCardList[n] = 'danger'
                    switch (this.isRightList[n].option){
                        case 1:
                            this.styleObjectA[n] = this.mistake   
                            break;
                        case 2:
                            this.styleObjectB[n] = this.mistake   
                            break;
                        case 4:
                            this.styleObjectC[n] = this.mistake   
                            break;
                        case 8:
                            this.styleObjectD[n] = this.mistake   
                            break;
                    }
                } 
                
            }
        },

        fenxi(){
            this.elabel = "fenxi"
        },

        datika(dindex){
            this.index = dindex
        },
    }
}
</script>

